<template>
  <div class="both" style="padding: 0px 40px; margin-top: 30px">
    <div class="main">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7">
          <div class="box-bg">
            <div class="elicon a">
              <el-icon :size="45" color="#40C9C6" class="icona">
                <Grid />
              </el-icon>
              <div class="hidden-md-and-down">
                <div>商品数量</div>
                <div class="scroll_num">
                  <count-to :startVal="0" :endVal="quantity" :duration="3000"></count-to>
                </div>
              </div>
            </div>
            <div class="elicon b">
              <el-icon :size="45" color="#36A3F7" class="iconb">
                <ChatDotSquare />
              </el-icon>
              <div class="hidden-md-and-down">
                <div>未发货单</div>
                <div class="scroll_num">
                  <count-to
                    :startVal="0"
                    :endVal="waitStockCounts"
                    :duration="3000"
                  ></count-to>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 柱形图 -->
        <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
          <div id="columnChart" ref="column"></div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row>
        <!-- 折线图 -->
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <div id="lineChart" ref="line"></div>
        </el-col>
        <!-- 饼状图 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <div id="pieChart" ref="pie"></div>
        </el-col>
        <!-- 饼状图2 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <div id="pieCharts" ref="pies"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Grid, ChatDotSquare } from "@element-plus/icons-vue";
import * as echarts from "echarts";
import { CountTo } from "vue3-count-to";
import { ref, onBeforeUnmount } from "vue";
import { post } from "@/request/http"; //引入封装好的axios
import "element-plus/theme-chalk/display.css";
type EChartsOption = echarts.EChartsOption;
const quantity = ref(); //商品数量
const waitStockCounts = ref(); //未发货单
let column: echarts.ECharts | undefined = undefined;
let line: echarts.ECharts | undefined = undefined;
let pie: echarts.ECharts | undefined = undefined;
let pies: echarts.ECharts | undefined = undefined;
const king = () => {
  let data = {
    _gp: "admin.dashboard",
    _mt: "integral",
  };
  post(data)
    .then((res) => {
      console.log(res);
      let { daysOrder, channel, area, daysSum, goodsCount, waitStockCount } = res.data;
      quantity.value = goodsCount;
      waitStockCounts.value = waitStockCount;
      // 柱形图
      let columnChart = document.getElementById("columnChart")!;
      column = echarts.init(columnChart);
      // 折线图
      let lineChart = document.getElementById("lineChart")!;
      line = echarts.init(lineChart);
      // 饼状图
      let pieChart = document.getElementById("pieChart")!;
      pie = echarts.init(pieChart);
      // 饼状图2
      let pieCharts = document.getElementById("pieCharts")!;
      pies = echarts.init(pieCharts);

      // 柱形图
      let columnOption: EChartsOption = {
        title: {
          text: "七日订单",
          subtext: "订单数",
          left: "left",
        },
        legend: {
          data: ["订单数"],
          left: "right",
        },
        xAxis: {
          type: "category",
          data: daysOrder[0], //日期
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数",
            type: "bar",
            barWidth: "30%", //柱子大小
            color: ["#3EA6F7"], //柱子颜色
            emphasis: { focus: "series" },
            data: daysOrder[1], //数据
          },
        ],
      };
      // 折线图
      let lineOption: EChartsOption = {
        title: {
          text: "7日成交金额",
          subtext: "订单数",
          left: "left",
        },
        legend: {
          data: ["订单数"],
          left: "right",
        },
        xAxis: {
          type: "category",
          data: daysSum[0], //日期
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数",
            type: "line",
            emphasis: {
              focus: "series",
            },
            data: daysSum[1], //数据
          },
        ],
      };
      //饼状图
      let pieOption = {
        title: {
          text: "订单地区分布",
          left: "left",
        },
        legend: {
          data: ["地区分布"],
          left: "right",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: area,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      //饼状图2
      let pieOptions = {
        title: {
          text: "订单渠道分布",
          left: "left",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: channel,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 柱形图
      columnOption && column.setOption(columnOption);
      // 折线图
      lineOption && line.setOption(lineOption);
      //饼状图
      pieOption && pie.setOption(pieOption);
      //饼状图2
      pieOptions && pies.setOption(pieOptions);
      window.onresize = function () {
        // echarts图表自适应resize方法
        if (column && line && pie && pies) {
          column.resize();
          line.resize();
          pie.resize();
          pies.resize();
        }
      };
    })
    .catch((err) => {});
};
king();
onBeforeUnmount(() => {
  if (column) {
    column.dispose();
    column = undefined;
  }
  if (line) {
    line.dispose();
    line = undefined;
  }
  if (pie) {
    pie.dispose();
    pie = undefined;
  }
  if (pies) {
    pies.dispose();
    pies = undefined;
  }
});
</script>

<style lang="less" scoped>
.scroll_num {
  & span {
    font-size: 1.3rem;
    font-weight: 700;
  }
}
.box-bg {
  height: 340px;

  .elicon {
    height: 90px;
    padding: 0px 20px;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 0px 20px 0px #e3e2e2;
  }
}
// 悬停效果
.a:hover .icona {
  background: #40c9c6;
  color: #fff;
  transition: 0.5s;
}
.b:hover .iconb {
  background: #36a3f7;
  color: #fff;
  transition: 0.5s;
}

// 柱形图
#columnChart {
  width: 80%;
  margin: auto;
  height: 340px;
}

// 折线图
#lineChart {
  width: 100%;
  height: 300px;
}

// 饼图
#pieChart {
  width: 100%;
  height: 300px;
}

// 饼图2
#pieCharts {
  width: 100%;
  height: 300px;
}
</style>
